<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>协议管理</title>
    <#assign base=request.contextPath  />
    <link rel="stylesheet" href="${base}/admin/MyStatic/frame/layui/css/layui.css" media="all">
    <script type="text/javascript" src="${base}/admin/MyStatic/js/zhang.js"></script>

    <script src="${base}/admin/MyStatic/js/echars/echarts.js"></script>
</head>
<body>
<fieldset class="layui-elem-field layui-field-title" style="margin-top: 30px;">
    <legend>系统设置</legend>
</fieldset>
<!-- 为 ECharts 准备一个具备大小（宽高）的 DOM -->
<div id="dir" style="width: 1600px;height:400px;"></div>

<div id="cpu" style="width: 1600px;height:400px;">

</div>

<script src="${base}/admin/MyStatic/js/jquery.min.js"></script>
<script src="${base}/admin/MyStatic/frame/layui/layui.js"></script>
<script>
    layui.use(['element', 'layer'], function () {
        var element = layui.element;
        var layer = layui.layer;
        // 基于准备好的dom，初始化echarts实例
        var myChart = echarts.init(document.getElementById('dir'));
        var cpu = echarts.init(document.getElementById('cpu'));

        // 指定图表的配置项和数据
        var option = {
            title: {
                text: '磁盘信息'
            },
            tooltip: {},
            legend: {
                data:['磁盘信息']
            },
            xAxis: {
                data: []
            },
            yAxis: {},
            series: [{
                name: '使用率%',
                type: 'bar',
                data: []
            }]
        };

        // 使用刚指定的配置项和数据显示图表。
     //   myChart.setOption(option);
        var option2 = {
            backgroundColor: '#2c343c',

            title: {
                text: '内存  占用率监控 ',
                left: 'center',
                top: 20,
                textStyle: {
                    color: '#Reflex'
                }
            },

            tooltip : {
                trigger: 'item',
                formatter: "{a} <br/>{b} : {c} ({d}%)"
            },

            visualMap: {
                show: false,
                min: 1,
                max: 100,
                inRange: {
                    colorLightness: [0, 1]
                }
            },
            series : [
                {
                    name:'CPU',
                    type:'pie',
                    radius : '80%',
                    center: ['50%', '50%'],
                    data:[
                        {value:0, name:'内存已使用率'},
                        {value:0, name:'内存未使用率'}
                    ].sort(function (a, b) { return a.value - b.value; }),
                    roseType: 'radius',
                    label: {
                        normal: {
                            textStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            }
                        }
                    },
                    labelLine: {
                        normal: {
                            lineStyle: {
                                color: 'rgba(255, 255, 255, 0.3)'
                            },
                            smooth: 0.2,
                            length: 10,
                            length2: 20
                        }
                    },
                    itemStyle: {
                        normal: {
                            color: '#c23531',
                            shadowBlur: 200,
                            shadowColor: 'rgba(0, 0, 0, 0.5)'
                        }
                    },

                    animationType: 'scale',
                    animationEasing: 'elasticOut',
                    animationDelay: function (idx) {
                        return Math.random() * 200;
                    }
                }
            ]
        };
        refeshSystem(0);
        function refeshSystem( isShowCpu){
            option.xAxis.data=[];
            option.series[0].data=[];
            $.ajax({
                type: "get", //提交方式
                data:{isShowCpu:isShowCpu},
                url: "${base}/admin/system/refeshSystem",//路径
                dataType:"json",
                success: function (data) {//返回数据根据结果进行相应的处理
                    var disk=data.disk;
                    for(var key in disk){
                       var responesJson= disk[key];
                        option.xAxis.data.push(responesJson.dir+"盘")
                        option.series[0].data.push(responesJson.sum)
                    }

                    var memery= data.memery;
                    option2.series[0].data[0].value=memery;
                    option2.series[0].data[1].value=100-memery;

                    if(isShowCpu===2){

                    }

                    myChart.setOption(option);
                    cpu.setOption(option2);

                }
            });
        }

    });
</script>
</body>
</html>